
@import url(./index.less);
@import url(../../../styles/common.less);
@keyframes title_animation {
    0%{
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(25deg)
    }
    50%{
        transform: rotate(45deg)
    }
    75%{
        transform: rotate(25deg)
    }
    100%{
        transform: rotate(0deg)
    }
}
.job_section{
    .job_part();
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(var(--primaryColor), var(--bgCard)) ;
    .title{
        display: flex;
        justify-content: center;
        .title();
    }
    .title_open{
        animation-name: title_animation;
        animation-duration: 1.2s;
        animation-delay: 0.5s;
        animation-timing-function: ease-out;
        transform-origin: 0 0;
    }
    .content{
        height: 30rem;
        width: calc(~'100% - 4rem');
        padding: 2rem;
        margin-top: 1rem;
        background: var(--bgCard);
        border: 1px solid var(--dividerColor);
        border-radius: 1rem;
        .flex();


        table{
            width: 100%;
            tr {
                th{
                    color: var(--textTitleColor);
                    font-family: denglong;
                    font-size: 1.2rem;
                    padding: 3rem 0;
                    text-align: right;
                    min-width: 15rem;
                }
                td{
                    color: var(--textLinkColor);
                    font-size: 1rem;
                    font-weight: bold;
                }
            }
        }
    }
}



@media screen and (max-width: @mobile_screen) {
    .job_section{
        .job_part_mobile();
        .title{
            .title_mobile();
        }
        .content{
            width: calc(100% - 4rem);
            height: 75%;
            .flex(@fd: column;@jc:flex-start;);
            
            tr{
                th {
                    text-align: left !important;
                    padding: 0.5rem 0 !important;
                    min-width: 7rem !important;
                }
                td{

                }
            }
        }
        // 英语并且是移动端单独处理
        .mobile_en_content{
            padding: 1rem;
            tr{
                th {
                    text-align: left !important;
                    padding: 0.2rem 0 !important;
                    min-width: 6rem !important;
                    font-size: 1rem !important;
                }
                td{
                    font-size: 0.9rem !important;
                }
            }
        }
    }
   
}